<template>
  <div style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh;box-sizing: border-box;">
    <van-nav-bar title="地址管理" left-text="返回" left-arrow fixed @click="$router.push(curGoodsId?`/goods/${curGoodsId}`:'/user')">
  
    </van-nav-bar>
    <div style="height: 50px;"></div>

    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-address-list v-model="chosenAddressId" :list="addressList" @select="selectedAddress"
        default-tag-text="默认" @add="onAdd();" @edit="onEdit" />
    </van-list>



  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getAddressList, addAddress, delAddress, editAddress } from '@/api/index.js'
import useCartStore from '@/store/useCartStore'
import {useRouter,useRoute} from 'vue-router'

let route =  useRoute()
let router = useRouter()
let curGoodsId = localStorage.getItem('curGoodsId')
//请求地址列表所需要的数据
let page = 1
let limit = 10
let count = 0 //地址的数量
let addressList = ref([])
let addressScope = ref([])
let chosenAddressId = ref()

//控制列表是否继续加载
const loading = ref(false);
const finished = ref(false);

//进入页面立刻加载内地址列表
const onLoad = async () => {
  let res = await getAddressList({ page:page++, limit })
  if (res.code == 1) {
   loading.value = false
    count = res.data.count
    let resList = []
    //如果返回的有地址 则渲染页面
    if (res.data.list) {
      //存一份原始数据用于编辑地址时的数据回显
      addressScope.value.push(...res.data.list)
      //地址列表需要按照特定的字段渲染
      resList = res.data.list.map(item => {
        let street=item.street=='null'?'':item.street
        return {
          id: item.id,
          name: item.name,
          tel: item.phone,
          address: item.province + item.city + item.town +street+ item.detail,
          isDefault: item.is_default ? true : false
        }
      })
    }
    addressList.value.push(...resList)
   // console.log(addressList)
    //获取，默认选中的地址id
    chosenAddressId.value = addressList.value.find(item => item.isDefault)?.id
  }
  //当前的页数大于需要请求的次数 则关闭请求 
  if(page>Math.ceil(count/limit)){
    finished.value=true
  }
 
};

//新增地址
const onAdd = () => {
  router.push({
    path:'/edit-address',
    query:{
      orderInfo:route.query.orderInfo
    }
  })

  };
  //跳到编辑地址页面 用query传参
const onEdit = (item, index) => {
  //console.log(addressScope.value[index])
   router.push({
    path:'/edit-address',
    query:{
       addressInfo:btoa(encodeURI(JSON.stringify(addressScope.value[index]))),
      orderInfo:route.query.orderInfo
    }
   } )

  }
//解析订单信息与地址信息合并
let orderInfo = ref()
if(route.query.orderInfo){
  orderInfo.value=JSON.parse(decodeURI(atob(route.query.orderInfo)))
 // console.log(orderInfo.value)
}
// 跳到订单页面并传参
function  selectedAddress(data,index){
 // console.log(data)
 if(!route.query.orderInfo){
  onEdit(data,index)
  return
 }
 router.push({
  path:'/order',
  query:{
    orderInfo:btoa(encodeURI(JSON.stringify(
     { ...orderInfo.value,
      consignee_address:data.address,
      consignee_name:data.name,
      consignee_phone:data.tel,
      isDefault:data.isDefault,
      addressId:data.id
    }
      
    )))
  }
 })
  }
</script>

<style scoped>
    :deep() .van-nav-bar .van-icon {
    color: #0c9595;
    font-weight: bolder;
}

:deep() .van-nav-bar .van-nav-bar__text {
    color: #1BAEAE;
    font-weight: bolder;
}
:deep() .van-radio__icon--checked .van-icon {
    color: var(--van-white);
    background-color: #1baeae;
    border-color: #1baeae;
}
   :deep() .van-tag--primary {
    background: #1baeae;
}

:deep() .van-button--primary {
    color: var(--van-button-primary-color);
    background: #1baeae;
    border: var(--van-button-border-width) solid #1baeae;
}

:deep() .van-address-list{
  padding: 1%;
}
</style>